diff options
Diffstat (limited to 'src/app/manga/[title]/[id]/info.module.css')
| -rw-r--r-- | src/app/manga/[title]/[id]/info.module.css | 446 |
1 files changed, 223 insertions, 223 deletions
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css index b1b76f4..bc22f49 100644 --- a/src/app/manga/[title]/[id]/info.module.css +++ b/src/app/manga/[title]/[id]/info.module.css @@ -1,224 +1,224 @@ -.MangaInfoContainer { - margin: 68px auto; -} - -.MangaHero { - display: flex; - flex-direction: column; - justify-content: center; -} - -.TitleContainer { - display: flex; - justify-content: space-between; - align-items: center; - padding: 5px; - background-color: #2c2c2c9c; - backdrop-filter: blur(5px); - -} - -.TitleContainer p { - font-family: "Lexend Deca", serif; - font-size: 40px; - font-weight: 1000; -} - -.TitleContainer img { - border-radius: 10px; - margin-left: 5px; -} - -.MangaDescription { - color: white; - font-family: "Atkinson Hyperlegible", serif; - max-width: 98%; - margin: -10px auto; -} - -.Description h2 { - font-family: "Lexend Deca", serif; - color: gray; -} - -.Description p { - margin-top: -10px; -} - -.MangaReleaseYear { - margin-top: 10px; - font-family: "Poppins", serif; -} - -.GenreContainer { - margin-top: 5px; - display: flex; - align-items: center; - font-family: "Poppins", serif; -} - -.GenreText { - color: var(--neon-green); -} - -.GenreContainer { - margin-top: 10px; -} - -.genres { - display: flex; - align-items: center; - overflow-x: auto; -} - -.MangaGenre { - background-color: #5f5f5f5d; - border-radius: 5px; - padding: 2px 5px; - cursor: pointer; - margin: 2px; -} - -.MangaRatings { - display: flex; - margin-top: 10px; - font-family: "Poppins", serif; - /* justify-content: center; */ -} - -.MangaRatings span { - margin-right: 2px; - margin-left: 2px; - color: var(--light-green); -} - -.CharactersContainer { - max-width: 98%; - margin: 20px auto; -} - -.CharactersContainer h2 { - color: gray; - font-family: "Lexend Deca", serif; -} - -.Character { - display: flex; - flex-direction: row; - overflow-x: auto; - margin-top: -10px; -} - -.Character::-webkit-scrollbar { - height: 5px; -} - -.Character::-webkit-scrollbar-thumb { - background-color: #31363F; - border-radius: 5px; -} - -.CharacterEntry { - display: flex; - flex-direction: column; - align-items: center; - width: auto; - margin: 5px; -} - -.CharacterEntry p { - margin: 10px auto; - text-align: center; - width: 110px; - color: white; - font-family: "Atkinson Hyperlegible", serif; -} - -.CharacterEntry img { - border-radius: 10px; -} - -/* Chapters Buttons */ - -.Chapters { - display: flex; - align-items: center; - justify-content: space-between; - max-width: 90%; - margin: 20px auto; -} - -.ChapterTitle { - color: white; - font-family: "Lexend Deca", serif; - font-size: 32px; -} - -.ChapterContainer { - width: 50dvw; - text-align: center; - height: 300px; - overflow-y: auto; -} - -.ChapterContainer::-webkit-scrollbar { - width: 5px; - height: 0px; -} - -.ChapterContainer::-webkit-scrollbar-thumb { - background-color: #31363F; - border-radius: 5px; -} - -.ChapterContainer button { - width: 130px; - height: auto; - padding: 10px; - margin: 5px; - border-radius: 5px; - font-size: 16px; - border: none; - outline: none; - color: white; - background-color: #3d3d3d; - cursor: pointer; - transition: background-color 100ms ease-in-out; -} - -.ChapterContainer button p { - font-family: "Atkinson Hyperlegible", serif; - margin: 2px; -} - -.ChapterContainer button:hover { - background-color: #1f1f1f; - transition: background-color 50ms ease-in -} - -.ChapterContainer button:focus { - opacity: 0.7; - transition: transform 0.2s linear; - background-color: var(--pastel-red); - transform: scale(0.9); -} - -@media screen and (max-width: 768px) { - .MangaInfoContainer { - max-width: 100%; - } - - .TitleContainer p { - font-size: 28px; - } - - .ChapterContainer button { - width: 120px; - - } - - .ChapterContainer button p { - font-size: 14px; - } - +.MangaInfoContainer {
+ margin: 68px auto;
+}
+
+.MangaHero {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.TitleContainer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 5px;
+ background-color: #2c2c2c9c;
+ backdrop-filter: blur(5px);
+
+}
+
+.TitleContainer p {
+ font-family: "Lexend Deca", serif;
+ font-size: 40px;
+ font-weight: 1000;
+}
+
+.TitleContainer img {
+ border-radius: 10px;
+ margin-left: 5px;
+}
+
+.MangaDescription {
+ color: white;
+ font-family: "Atkinson Hyperlegible", serif;
+ max-width: 98%;
+ margin: -10px auto;
+}
+
+.Description h2 {
+ font-family: "Lexend Deca", serif;
+ color: gray;
+}
+
+.Description p {
+ margin-top: -10px;
+}
+
+.MangaReleaseYear {
+ margin-top: 10px;
+ font-family: "Poppins", serif;
+}
+
+.GenreContainer {
+ margin-top: 5px;
+ display: flex;
+ align-items: center;
+ font-family: "Poppins", serif;
+}
+
+.GenreText {
+ color: var(--neon-green);
+}
+
+.GenreContainer {
+ margin-top: 10px;
+}
+
+.genres {
+ display: flex;
+ align-items: center;
+ overflow-x: auto;
+}
+
+.MangaGenre {
+ background-color: #5f5f5f5d;
+ border-radius: 5px;
+ padding: 2px 5px;
+ cursor: pointer;
+ margin: 2px;
+}
+
+.MangaRatings {
+ display: flex;
+ margin-top: 10px;
+ font-family: "Poppins", serif;
+ /* justify-content: center; */
+}
+
+.MangaRatings span {
+ margin-right: 2px;
+ margin-left: 2px;
+ color: var(--light-green);
+}
+
+.CharactersContainer {
+ max-width: 98%;
+ margin: 20px auto;
+}
+
+.CharactersContainer h2 {
+ color: gray;
+ font-family: "Lexend Deca", serif;
+}
+
+.Character {
+ display: flex;
+ flex-direction: row;
+ overflow-x: auto;
+ margin-top: -10px;
+}
+
+.Character::-webkit-scrollbar {
+ height: 5px;
+}
+
+.Character::-webkit-scrollbar-thumb {
+ background-color: #31363F;
+ border-radius: 5px;
+}
+
+.CharacterEntry {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: auto;
+ margin: 5px;
+}
+
+.CharacterEntry p {
+ margin: 10px auto;
+ text-align: center;
+ width: 110px;
+ color: white;
+ font-family: "Atkinson Hyperlegible", serif;
+}
+
+.CharacterEntry img {
+ border-radius: 10px;
+}
+
+/* Chapters Buttons */
+
+.Chapters {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ max-width: 90%;
+ margin: 20px auto;
+}
+
+.ChapterTitle {
+ color: white;
+ font-family: "Lexend Deca", serif;
+ font-size: 32px;
+}
+
+.ChapterContainer {
+ width: 50dvw;
+ text-align: center;
+ height: 300px;
+ overflow-y: auto;
+}
+
+.ChapterContainer::-webkit-scrollbar {
+ width: 5px;
+ height: 0px;
+}
+
+.ChapterContainer::-webkit-scrollbar-thumb {
+ background-color: #31363F;
+ border-radius: 5px;
+}
+
+.ChapterContainer button {
+ width: 130px;
+ height: auto;
+ padding: 10px;
+ margin: 5px;
+ border-radius: 5px;
+ font-size: 16px;
+ border: none;
+ outline: none;
+ color: white;
+ background-color: #3d3d3d;
+ cursor: pointer;
+ transition: background-color 100ms ease-in-out;
+}
+
+.ChapterContainer button p {
+ font-family: "Atkinson Hyperlegible", serif;
+ margin: 2px;
+}
+
+.ChapterContainer button:hover {
+ background-color: #1f1f1f;
+ transition: background-color 50ms ease-in
+}
+
+.ChapterContainer button:focus {
+ opacity: 0.7;
+ transition: transform 0.2s linear;
+ background-color: var(--pastel-red);
+ transform: scale(0.9);
+}
+
+@media screen and (max-width: 768px) {
+ .MangaInfoContainer {
+ max-width: 100%;
+ }
+
+ .TitleContainer p {
+ font-size: 28px;
+ }
+
+ .ChapterContainer button {
+ width: 120px;
+
+ }
+
+ .ChapterContainer button p {
+ font-size: 14px;
+ }
+
}
\ No newline at end of file |